<template>
    <div>
        <div class="model">
            <div class="model-title">
                <h2>入驻企业名单</h2>
            </div>
            <div>
                <div class="model-header">
                    <span>企业名称</span>
                    <span>企业类型</span>
                    <span>生产范围</span>
                    <span>产品数量</span>
                </div>
                <div class="model-news">
                    <!--<swiper v-if="newListStatus && newList.length > 6" class="swiper" :options="swiperOption">
                        <swiper-slide v-for="(item,index) in newList" :key="index" class="item">
                            <div class="content">
                                <span>{{item.companyName}}</span>
                                <span>{{item.type}}</span>
                                <span>{{item.range}}</span>
                                <span>{{item.num}}</span>
                            </div>
                        </swiper-slide>
                    </swiper>-->
                    <template v-if="newListStatus">
                        <div v-for="(item,index) in newList" :key="index" class="item">
                            <div class="content">
                                <span>{{item.companyName}}</span>
                                <span>{{item.type}}</span>
                                <span>{{item.range}}</span>
                                <span>{{item.num}}</span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <newInfoWindow v-if="newWindowStatus" :id="id" :info="info" @windowClose="windowClose" />
    </div>
</template>
<script>
    import newInfoWindow from '@/components/window/window2'
    import { getEnterpriseList } from '@/api/park'
    export default {
        data() {
            return {
                form: {
                    year: ''
                },
                newList: [],
                newListStatus: false,
                swiperOption: {
                    freeMode: true,
                    loop: true,
                    direction: 'vertical',
                    speed: 1500,
                    //自动轮播
                    autoplay: 2000,
                    autoplayDisableOnInteraction: false,
                    //开启循环模式
                    autoHeight: true,
                    slidesPerView: 6
                },
                newWindowStatus: false,
                id: '',
                info: ''
            }
        },
        components: {
            newInfoWindow
        },
        methods: {
            async getInfoList(form) {
                if (form.year == '') return
                const res = getEnterpriseList({
                    year: form.year
                })
                this.newList = res
                this.newListStatus = true
            },
            HandShowInfo(item) {
                this.info = item
                this.newWindowStatus = true
            },
            windowClose() {
                this.newWindowStatus = false
            }
        },
        watch: {
            '$store.state.app.year': {
                handler: function (nVal, oVal) {
                    this.form.year = nVal
                    this.getInfoList(this.form);
                },
                immediate: true
            }

        }
    }
</script>
<style scoped lang="scss">
    .model {
        margin-top: 1vh;
        padding: .4vw;
        background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
        background-size: 100% auto;
    }

    .model-title {
        padding: screenVw(1) 0 0;

        h2 {
            text-align: center;
            color: #78dffd;
            font-size: screenVw(1.2);
        }
    }
    .model-header {
        padding: 0 0.6vw;
    }
    .model-header,.content {
        color: #50EEFF;
        font-size: screenVw(0.9);
        display: flex;
        justify-content: space-between;

        span{
            display: inline-block;
            width: 18%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;

            &:first-child {
                width: 40%;
                margin-right: 2%;
                text-align: left
            }
            &:nth-child(2) {
                margin-right: 4%;
            }
        }
    }
    .model-news{
        height: 10.5vw;
        max-width: 34vw;
        overflow: hidden;
        padding-bottom: screenVw(0.5);
        overflow-y: scroll;
        .item{
            position: relative;
            color: #50EEFF;
            font-size: screenVw(.9);
            padding: .4vw .6vw;
            cursor: pointer;
        }
    }
    .swiper{
        height: 12.5vw;
    }

</style>
